/* general setup ----------------------------------------------------------------------------------*/
body{
  margin:0;
  padding:0;
  font-family:Arial, Helvetica, sans-serif;
  text-align:center;
  color:#4c4c4c;
}

.left{
  float:left;
}

.right{
  float:right;
}

.clear{
  clear:both;
}

a{
  outline:0px;
  color:#1c6ac0;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

img{
  border:0px;
}

h1{
  font-size:24px;
  font-weight:normal;
  margin:0;
  padding-top:16px;
  padding-bottom:8px;
}

h2{
  font-size:24px;
  font-weight:normal;
  margin:0;
  padding-top:16px;
  padding-bottom:8px;
}

h3{
  font-size:18px;
  font-weight:normal;
  margin:0;
  padding-top:12px;
  padding-bottom:6px;
}

h4{
  font-size:16px;
  font-weight:normal;
  font-style:italic;
  margin:0;
  padding-bottom:16px;
}

.container{
  width:1000px;
  margin:0 auto;
  text-align:left;
}


/* menu ----------------------------------------------------------------------------------*/
.menu a                 { color:#2f2f2f; font-size:12px; font-weight:bold; text-decoration:none; padding-top:5px; padding-bottom:5px; display:block; float:left; margin-right:10px;}
.menu a span.lc         { padding:5px; padding-left:5px;}
.menu a span.rc         { padding:5px; padding-right:3px; margin-left:2px;}

.menu .level1 a:hover   { color:#ffffff; background:url('images/menu-bg.jpg'); background-repeat:repeat-x;}
.menu .level1 .level2 a:hover { background:none;}
.menu a:hover span.lc   { background:url('images/menu-bg-left.jpg'); background-repeat:no-repeat;}
.menu a:hover span.rc   { background:url('images/menu-bg-right.jpg'); background-repeat:no-repeat;}

a.menuselected          { color:#ffffff; background:url('images/menu-bg.jpg'); background-repeat:repeat-x;}
span.lcselected         { padding:5px; padding-left:5px; background:url('images/menu-bg-left.jpg'); background-repeat:no-repeat;}
span.rcselected         { padding:5px; padding-right:3px; margin-left:2px; background:url('images/menu-bg-right.jpg'); background-repeat:no-repeat; background-position:top right;}

#menu ul{
  margin:0px;
  padding:0px;
  list-style:none;
}

#menu ul li{
  list-style:none;
}

#menu ul li a {
  display:block;
  text-decoration:none;
}

#menu ul.horizontal li.level1 {
  float:left;
  height:22px;
  padding:0px;
}

#menu ul.horizontal li.level1 a {
  font-family:Arial;
  font-size:12px;
  font-weight:bold;
}

#menu ul.horizontal li.level1 a:hover {
}

#menu ul.horizontal > li.level1 a {
  width:auto;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu ul li.level2 a { float:none;}
/* End IE5-Mac hack */

#menu ul.dropdown{
  z-index:100;
  position:absolute;
  margin-top:-1px;
  padding-top:5px;
  left:0px;
  visibility:hidden;
  width:200px;
  background-color:#1d6bc0;
}

#menu ul.dropdown li.level2 {
  border-bottom:1px solid #4383cb;
  line-height:20px;
  padding-left:10px;
}

#menu ul.dropdown li.level2 a {
  font-family:Arial;
  font-size:11px;
  font-weight:normal;
  color:white;
  padding:2px 4px 2px 5px;
}

#menu ul.dropdown li.level2 a:hover {
  text-decoration:underline;
}


/* big banner -------------------------------------------------------------------------------------*/
.bigbanner                   { background:url('images/bigbanner-bg.png'); background-repeat:repeat-x; height:264px; margin-top:20px; padding-top:5px; min-width:1000px;}
.bigbanner .container .left  { width:615px;}
.bigbanner .container .right { width:385px; height:255px;}
.bigbanner .blog             { background-color:#383838; height:255px;}

.blog h3                   { padding-left:30px; padding-top:20px; margin-top:0px;}
.blog .post                { background:url('images/separator-horizontal.png'); background-position:bottom; background-repeat:no-repeat; padding-bottom:10px; padding-top:5px;}
.blog .post span.date      { font-size:12px; color:#93c0f7; padding-left:30px; width:60px; display:inline-block;}
.blog .post a              { font-size:12px; color:#ffffff;}
.blog .readall             { text-align:right; padding-right:25px; padding-top:15px;}
.blog .readall a           { color:#ffffff; font-size:12px; top:-1px; position:relative; padding-right:5px;}

a.link1                    { font-weight:bold; margin-top:10px; display:block;}
a.link2                    { font-weight:bold; margin-top:20px; display:block;}
a.link3                    { font-size:12px; font-weight:bold; margin-top:10px; display:block;}

.bigbanner .post           { background:url('images/separator-horizontal.png'); background-position:bottom; background-repeat:no-repeat; padding-bottom:7px; padding-top:7px;}
.bigbanner .postl          { padding-bottom:0px; padding-top:7px;}
.bigbanner .post .left     { width:100px; padding-left:20px; padding-top:10px; padding-right:10px;}
.bigbanner .postl .left    { width:100px; padding-left:20px; padding-top:10px; padding-right:10px;}


/* small banners --------------------------------------------------------------------------------------*/
.banner, .accountbanner       { background:url('images/banner-bg.png'); background-repeat:repeat-x; height:95px; margin-top:20px; padding-top:5px; color:#ffffff; min-width:1000px;}
.banner .container            { background:url('images/banner-overlay-blue.png'); background-repeat:no-repeat; height:91px; margin-top:-3px; padding-left:5px;}
.accountbanner .container     { background:url('images/banner-overlay-green.png'); background-repeat:no-repeat; height:91px; margin-top:-3px; padding-left:5px;}
.banner h1, .accountbanner h1 { padding:0; margin:0; line-height:91px; font-size:32px; font-weight:normal;}

.headicon { margin-top:10px; margin-right:20px; margin-left:-10px;}

.accountbanner .container .right         { background:url('images/login-bg.png'); padding:10px; margin-right:20px; margin-top:30px; font-size:11px;}
.accountbanner .container .right a       { color:#3382da;}


/* blog ----------------------------------------------------------------------------------*/
.left-column-blog       { padding-left:0px; padding-right:0px; padding-bottom:50px;}
.right-column-blog      { padding-bottom:50px; width:380px;}

.blogpost h2.blogtitle  { margin:0px; margin-bottom:10px;}
.blogpost b.date        { color:#5c5c5c;}
.blogpost               { font-size:14px; line-height:24px; padding-right:20px;}

.postfoot               { border-top:1px solid #d1d1d1; border-bottom:1px solid #d1d1d1; line-height:40px; padding-right:20px; font-size:14px; margin-bottom:40px;}
.postfoot a             { color:#1c6ac0;}

.right-column-blog a.rss-header       { padding-left:30px; font-size:18px; font-weight:normal; color:#666;}
.right-column-blog a.rss-header img   { top:10px; position:relative; margin-left:20px;}

.blog-right-header         { font-size:18px; color:#666; background-color:#f1f1f1; line-height:40px; margin-top:20px; margin-bottom:10px;}

.right-column-blog a       { color:#1c6ac0; font-size:14px; padding-left:30px; line-height:30px;}
.right-column-blog h2      { margin-left:30px;}
.right-column-blog h4      { margin-left:30px;}
.right-column-blog div     { margin-left:30px;}


/* content ----------------------------------------------------------------------------------*/
.content              { background:url('images/content-bg.png'); background-repeat:repeat-x; min-height:137px; margin-top:-9px; padding-top:20px; padding-bottom:20px; font-size:12px; line-height:20px; min-width:1000px;}

.right-gray-box       { clear:right; float:right; background:#ddd url('images/steel.jpg') repeat top left; padding:6pt; width:40%; margin:0 0 12pt 12pt;}
.right-box            { clear:right; float:right; text-align:center; padding:6pt; width:40%; margin:0 0 12pt 12pt;}

ul.errorlist {
  color: #f00;
}

li.faq                { margin-bottom:10px; margin-top:10px;}

.placeholder          { width:1px; height:100px;}
.separator-top        { height:95px; background:url('images/separator-top.png'); background-repeat:no-repeat; width:1px;}
.separator-horizontal-fading { width:100%; height:2px; background:url('images/separator-horizontal-fading.jpg'); background-repeat:no-repeat; background-position:bottom; position:relative; margin-left:-30px; margin-bottom:10px;}
.separator-bottom     { width:1px; background:url('images/separator-bottom.png'); background-repeat:no-repeat; background-position:bottom; background-color:#d6d6d6;}

.right-column-home    { padding-left:30px; padding-bottom:50px; width:480px;}
.right-column-home b  { font-size:14px;}
.left-column-home     { padding-right:20px; padding-bottom:50px; width:480px;}
.left-column-home b   { font-size:14px;}

.left-column          { padding-right:20px; padding-bottom:50px;}
.left-column b        { font-size:14px;}
.right-column         { padding-left:30px; padding-bottom:50px; width:350px;}
.right-column a       { color:#1c6ac0;}

.homenote             { float:left; padding-left:20px; height:50px; padding-top:5px; width:390px;}

.icon                 { margin-left:5px; margin-right:10px;}
.icon2                { margin-top:4px; margin-left:5px; margin-right:10px;}

input[type=text], input[type=password] { height:20px; padding-top:4px; padding-left:5px; color:#4c4c4c; border:1px solid #c8c8c8;}
textarea { padding-top:4px; padding-left:5px; color:#4c4c4c; border:1px solid #c8c8c8;}
.input220             { width:220px;}
.input280             { width:280px;}
.signupinput          { width:400px; margin-bottom:12px;}

.signupcheckbox       { top:2px; position:relative;}

.selectbox            { color:#4c4c4c; border:1px solid #c8c8c8; width:220px;}
.selectboxmin         { color:#4c4c4c; border:1px solid #c8c8c8; width:120px;}
.selectboxmax         { color:#4c4c4c; border:1px solid #c8c8c8; width:280px; height:25px;}

.serverinput          { width:300px; margin-top:5px; margin-bottom:5px;}

.configinput          { padding-left:20px; margin-top:25px; float:left;}
a.configlink          { font-size:12px; font-weight:bold; color:#464646;}
a.expand              { color:#76c421; background:url('images/arrow-green-d.png'); background-position:right; background-repeat:no-repeat; padding-right:10px; margin-left:3px;}

.info                 { position:absolute; border:1px solid #96dc40; margin-top:-24px; margin-left:27px; width:300px; background-color:#71b61d; display:none; z-index:100; color:#ffffff; padding:10px; font-size:11px;}
.info a               { color:#ffffff;}

.box             { background-color:#ffffff; border:1px solid #91db37; padding:20px; float:left; margin-right:10px; width:247px; margin-bottom:10px; padding-bottom:10px;}
.server-icon     { width:49px; height:66px; background:url('images/server.png'); background-repeat:no-repeat; float:left;}
.drive-icon      { width:49px; height:56px; background:url('images/drive-narrow.png'); background-repeat:no-repeat; float:left;}
.status-active   { background:url('images/ball-green.png'); background-repeat:no-repeat; width:16px; height:16px; position:absolute; margin-top:-4px; margin-left:-4px;}
.status-inactive { background:url('images/ball-red.png'); background-repeat:no-repeat; width:16px; height:16px; position:absolute; margin-top:-4px; margin-left:-4px;}
.server-info     { width:150px; font-size:11px; float:left; line-height:16px; margin-left:5px;}
.server-info b   { font-size:11px; line-height:16px;}
.drive-info      { width:150px; font-size:11px; float:left; line-height:16px; margin-left:15px; min-height:90px;}
.drive-info b    { font-size:11px; line-height:16px;}
.server-additional-info       { width:200px; padding:20px; font-size:11px; padding-bottom:0px;}
.server-additional-info .icon { width:19px; height:19px; float:left; margin-right:10px; margin-left:-10px; margin-bottom:5px;}
.controls        { position:absolute; margin-left:210px; margin-top:-10px;}


/* buttons -------------------------------------------------------------------------------------*/
a.btn-add              { color:#ffffff; font-size:12px; text-decoration:none; line-height:22px;}
a.btn-add span.l       { background:url('images/btn-add-left.png'); background-repeat:no-repeat; width:29px; height:25px; display:inline-block; vertical-align:middle;}
a.btn-add span.m       { background:url('images/btn-add-middle.png'); background-repeat:repeat-x; width:auto; height:25px; display:inline-block; vertical-align:middle;}
a.btn-add span.r       { background:url('images/btn-add-right.png'); background-repeat:no-repeat; width:21px; height:25px; display:inline-block; vertical-align:middle;}
a.btn-add:hover span.l { background:url('images/btn-add-left-hover.png');}
a.btn-add:hover span.m { background:url('images/btn-add-middle-hover.png');}
a.btn-add:hover span.r { background:url('images/btn-add-right-hover.png');}

a.btn-green              { color:#ffffff; font-size:18px; text-decoration:none; line-height:37px;}
a.btn-green span.l       { background:url('images/btn-green-left.jpg'); background-repeat:no-repeat; width:45px; height:55px; display:inline-block; vertical-align:middle;}
a.btn-green span.m       { background:url('images/btn-green-middle.jpg'); background-repeat:repeat-x; width:auto; height:55px; display:inline-block; vertical-align:middle;}
a.btn-green span.r       { background:url('images/btn-green-right.jpg'); background-repeat:no-repeat; width:45px; height:55px; display:inline-block; vertical-align:middle;}
a.btn-green:hover span.l { background:url('images/btn-green-left-hover.jpg');}
a.btn-green:hover span.m { background:url('images/btn-green-middle-hover.jpg');}
a.btn-green:hover span.r { background:url('images/btn-green-right-hover.jpg');}

a.btn-green-arrow              { color:#ffffff; font-size:18px; text-decoration:none; line-height:37px;}
a.btn-green-arrow span.l       { background:url('images/btn-green-left.jpg'); background-repeat:no-repeat; width:45px; height:55px; display:inline-block; vertical-align:middle;}
a.btn-green-arrow span.m       { background:url('images/btn-green-middle.jpg'); background-repeat:repeat-x; width:auto; height:55px; display:inline-block; vertical-align:middle;}
a.btn-green-arrow span.r       { background:url('images/btn-green-right-arrow.jpg'); background-repeat:no-repeat; width:45px; height:55px; display:inline-block; vertical-align:middle;}
a.btn-green-arrow:hover span.l { background:url('images/btn-green-left-hover.jpg');}
a.btn-green-arrow:hover span.m { background:url('images/btn-green-middle-hover.jpg');}
a.btn-green-arrow:hover span.r { background:url('images/btn-green-right-arrow-hover.jpg');}

a.btn-green-small-arrow              { color:#ffffff; font-size:12px; text-decoration:none; line-height:27px;}
a.btn-green-small-arrow span.l       { background:url('images/btn-green-small-left.png'); background-repeat:no-repeat; width:14px; height:44px; display:inline-block; vertical-align:middle;}
a.btn-green-small-arrow span.m       { background:url('images/btn-green-small-middle.png'); background-repeat:repeat-x; width:auto; height:44px; display:inline-block; vertical-align:middle;}
a.btn-green-small-arrow span.r       { background:url('images/btn-green-small-right-arrow.png'); background-repeat:no-repeat; width:50px; height:44px; display:inline-block; vertical-align:middle;}
a.btn-green-small-arrow:hover span.l { background:url('images/btn-green-small-left-hover.png');}
a.btn-green-small-arrow:hover span.m { background:url('images/btn-green-small-middle-hover.png');}
a.btn-green-small-arrow:hover span.r { background:url('images/btn-green-small-right-arrow-hover.png');}

a.btn-blue              { color:#ffffff; font-size:18px; text-decoration:none; line-height:37px;}
a.btn-blue span.l       { background:url('images/btn-blue-left.jpg'); background-repeat:no-repeat; width:45px; height:55px; display:inline-block; vertical-align:middle;}
a.btn-blue span.m       { background:url('images/btn-blue-middle.jpg'); background-repeat:repeat-x; width:auto; height:55px; display:inline-block; vertical-align:middle;}
a.btn-blue span.r       { background:url('images/btn-blue-right.jpg'); background-repeat:no-repeat; width:45px; height:55px; display:inline-block; vertical-align:middle;}
a.btn-blue:hover span.l { background:url('images/btn-blue-left-hover.jpg');}
a.btn-blue:hover span.m { background:url('images/btn-blue-middle-hover.jpg');}
a.btn-blue:hover span.r { background:url('images/btn-blue-right-hover.jpg');}

a.btn-blue-arrow              { color:#ffffff; font-size:18px; text-decoration:none; line-height:37px;}
a.btn-blue-arrow span.l       { background:url('images/btn-blue-left.jpg'); background-repeat:no-repeat; width:45px; height:55px; display:inline-block; vertical-align:middle;}
a.btn-blue-arrow span.m       { background:url('images/btn-blue-middle.jpg'); background-repeat:repeat-x; width:auto; height:55px; display:inline-block; vertical-align:middle;}
a.btn-blue-arrow span.r       { background:url('images/btn-blue-right-arrow.jpg'); background-repeat:no-repeat; width:45px; height:55px; display:inline-block; vertical-align:middle;}
a.btn-blue-arrow:hover span.l { background:url('images/btn-blue-left-hover.jpg');}
a.btn-blue-arrow:hover span.m { background:url('images/btn-blue-middle-hover.jpg');}
a.btn-blue-arrow:hover span.r { background:url('images/btn-blue-right-arrow-hover.jpg');}

a.btn-delete          { background:url('images/btn-delete.png'); background-repeat:no-repeat; width:38px; height:27px; display:block; text-decoration:none;}
a.btn-delete:hover    { background:url('images/btn-delete-hover.png'); background-repeat:no-repeat; width:38px; height:27px; display:block;}
a.btn-delete-inactive { background:url('images/btn-delete-inactive.png'); background-repeat:no-repeat; width:38px; height:27px; display:block; text-decoration:none; cursor:default;}

a.btn-shutdown        { background:url('images/btn-shutdown.png'); background-repeat:no-repeat; width:38px; height:27px; display:block; text-decoration:none;}
a.btn-shutdown:hover  { background:url('images/btn-shutdown-hover.png'); background-repeat:no-repeat; width:38px; height:27px; display:block;}

a.btn-reset           { background:url('images/btn-reset.png'); background-repeat:no-repeat; width:38px; height:27px; display:block; text-decoration:none;}
a.btn-reset:hover     { background:url('images/btn-reset-hover.png'); background-repeat:no-repeat; width:38px; height:27px; display:block;}

a.btn-poweroff        { background:url('images/btn-poweroff.png'); background-repeat:no-repeat; width:38px; height:27px; display:block; text-decoration:none;}
a.btn-poweroff:hover  { background:url('images/btn-poweroff-hover.png'); background-repeat:no-repeat; width:38px; height:27px; display:block;}

a.btn-start           { background:url('images/btn-start.png'); background-repeat:no-repeat; width:38px; height:27px; display:block; text-decoration:none;}
a.btn-start:hover     { background:url('images/btn-start-hover.png'); background-repeat:no-repeat; width:38px; height:27px; display:block;}
a.btn-start-inactive  { background:url('images/btn-start-inactive.png'); background-repeat:no-repeat; width:38px; height:27px; display:block; text-decoration:none; cursor:default;}

a.btn-edit            { background:url('images/btn-edit.png'); background-repeat:no-repeat; width:38px; height:27px; display:block; text-decoration:none;}
a.btn-edit:hover      { background:url('images/btn-edit-hover.png'); background-repeat:no-repeat; width:38px; height:27px; display:block;}

a.btn-copy            { background:url('images/btn-copy.png'); background-repeat:no-repeat; width:38px; height:27px; display:block; text-decoration:none;}
a.btn-copy:hover      { background:url('images/btn-copy-hover.png'); background-repeat:no-repeat; width:38px; height:27px; display:block;}


/* sliders -------------------------------------------------------------------------------------*/
div.slidertrack {
  width: 330px;
  height: 9px;
  background: transparent url('../images/slider-images-track-right.png') no-repeat top right;
  margin-top:10px;
}

div.slidertrackleft {
  position: absolute;
  width: 5px;
  height: 9px;
  background: transparent url('../images/slider-images-track-left.png') no-repeat top left;
}

div.sliderhandle {
  width: 19px;
  height: 20px;
}


/* accordion -----------------------------------------------------------------------------------*/
div.accordion{
  border-bottom:1px solid #d1d1d1;
}

div.accordion-toggle{
  position:relative; /* required for effect */
  z-index:10; /* required for effect */
  background:url('images/panel-bg.png');
  background-repeat:repeat-x;
  cursor:pointer;
  margin:0px;
  padding-left:15px;
  line-height:40px;
  font-size:14px;
  font-weight:bold;
}

.pointer{
  background:url('images/arrow-grey-r.png');
  background-repeat:no-repeat;
  width:20px;
  height:20px;
  float:left;
  margin-top:15px;
}

div.accordion-toggle-active .pointer{
  background:url('images/arrow-grey-d.png');
  background-repeat:no-repeat;
}

div.accordion-content{
  overflow:hidden; /* required for effect */
  padding:0px;
  padding-left:10px;
  height:70px;
}

div.accordion-content p{
  padding-left:130px;
  font-size:14px;
  margin-top:0px;
}


/* tables --------------------------------------------------------------------------------------*/
table.visible      { padding-top:20px; padding-bottom:20px; border-collapse:collapse;}
table.visible th   { font-weight:bold; border-bottom:1px solid #d1d1d1; padding:6px;}
table.visible td   { border-bottom:1px solid #d1d1d1; padding:6px;}
table.visible .row { background-color:#ededed;}

table.gray {
  background: #ddd url('images/steel.jpg') repeat top left;
  border-collapse: collapse;
}

table.gray th {
  text-align: center;
  vertical-align: middle;
}

table.gray td {
  padding: 5pt;
  vertical-align: middle;
}

table.form td      { font-size:12px; padding-right:20px; padding-top:10px; padding-bottom:10px;}
table.form td.pr   { padding-right:0px; margin-right:0px;}
.radio             { position:relative; top:2px;}

table.config tr td { border-left:4px solid #96dc40; border-top:1px solid #96dc40; padding:20px; font-size:12px; line-height:24px; background:url('images/config-bg.jpg'); background-repeat:repeat-x; height:111px;}

table.drives       { font-size:11px; width:450px;}
table.drives th    { border-bottom:1px solid #cccccc; height:20px; background-color:#ffffff; text-align:left; padding:5px;}
table.drives tr td { border:0px; background:none; height:20px; text-align:left; margin:0; padding:5px;}
#drives            { display:none;}

.pricing           { font-size:12px; background-color:#fff; border-top:1px solid #a7e25f; width:607px;}
table.pricing tr.pricing { height:80px; background:url('images/pricing-bg.jpg'); background-repeat:repeat-x;}
td.rb              { border-right:1px solid #a7e25f; white-space:nowrap;}
td.lb              { border-left:1px solid #a7e25f;}
td.pw              { width:607px; background-color:#76c421; color:#fff; font-size:18px; line-height:25px;}
td.pwfoot          { padding:0px; height:14px; background:url('images/pricingwizard-bg.jpg'); background-repeat:repeat-x; border:0px;}


/* footer --------------------------------------------------------------------------------------*/
.footer              { background-color:#abadb3; height:250px; min-width:1000px;}
.footer .left        { font-size:11px; color:#dddddd; line-height:18px; padding-top:15px;}
.footer .left b      { font-size:12px;}
.footer .left .left  { padding-right:50px;}
.footer .right       { text-align:right; font-size:11px; color:#dddddd; line-height:18px; padding-top:30px;}
.footer a            { color:#ffffff;}


/* helpers -------------------------------------------------------------------------------------*/
.p10  { padding:10px;}

.pt5  { padding-top:5px;}
.pt10 { padding-top:10px;}
.pt14 { padding-top:14px;}
.pt20 { padding-top:20px;}
.pt35 { padding-top:35px;}
.pt55 { padding-top:55px;}

.pb2 { padding-bottom:2px;}
.pb5 { padding-bottom:5px;}

.pr15 { padding-right:15px;}
.pr20 { padding-right:20px;}

.mtm10 { margin-top:-10px;}
.mrm30 { margin-right:-30px;}
.mr15 { margin-right:15px;}

.h10  { height:10px;}
.h50  { height:50px;}

.f11  { font-size:11px; font-weight:normal;}
p.f11 { font-size:11px; font-weight:normal; line-height:18px;}

.grey     { color:#e4e4e4;}
.darkgrey { color:#2f2f2f;}
.orange   { color:#f58b00;}
.blue     { color:#1c6ac0;}
.green    { color:#6cb623;}
.red      { color:#ff0000;}
.white    { color:#ffffff;}
